<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病害图像识别</title>
    {% include 'admin/common/header.html' %}
</head>
<body class="pear-container">

<div class="layui-row layui-col-space15">
     <div class="layui-col-md4">
         <div class="layui-card" style="padding: 20px;">
            <div class="layui-tab-content">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>拖拽上传</legend>
                </fieldset>
                <div class="layui-upload-drag" id="check-img"> <i class="layui-icon"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                </div>

            </div>
        </div>
     </div>
     <div class="layui-col-md8">
         <div class="layui-panel">
             <div style="padding: 20px;">
                 <div class="layui-tab-content">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>识别病害准确率</legend>
                    </fieldset>
                 </div>
                <div class="layui-progress" lay-showPercent="yes" lay-filter="progross">
                    <div id="process" class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>
             </div>
             <div class="layui-col-md4" style="height: 300px;">
                 <div class="layui-card" style="padding: 20px;" id="uploadDemoView">
                     <img class="photo" style="max-width: 100%;height: 100%;" lay-event="photo" src="{{ url_for('static', filename='/admin/admin/images/pestdefault.jpg') }}">
                 <div style="padding: 10px;">病害图片</div>
                 </div>
             </div>
             <div class="layui-col-md8">
                 <div class="layui-card" style="padding-top: 10px;">
                    <fieldset class="layui-elem-field layui-field-title" id="pest-result">
                        <div class="layui-field-box" style="font-size: 18px;padding-left: 16px">

                            <p id="classindex">病害分类:</p>
                        </div>
                        <div class="layui-field-box" style="font-size: 18px;padding-left: 16px">

                            <p id="pest-symptom">病害特征:</p>
                        </div>
                        <div class="layui-field-box" style="font-size: 18px;padding-left: 16px">

                            <p id="pest-prevention">防治方法:</p>
                        </div>
                    </fieldset>

                 </div>
             </div>
         </div>

     </div>
</div>
{% include 'admin/common/footer.html' %}

<script>
    layui.use(['upload', 'element', 'layer', 'popup'], function(){
      var $ = layui.jquery
      ,upload = layui.upload
      ,element = layui.element
      ,popup = layui.popup
      ,layer = layui.layer;

      upload.render({
          elem: '#check-img'
          ,url: '/pest_check/img'
          ,auto: true
          ,done: function(res){
              // 上传完毕的回调函数
              console.log(res)
              layer.msg('识别病害成功');
              layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src + "?" + Math.random());
              layui.$('#classindex').html("病害分类: "+res.data.result)
              layui.$('#pest-symptom').html("病害特征: "+res.data.symptom)
              layui.$('#pest-prevention').html("防治方法: "+res.data.prevention)
              element.progress('progross', res.data.accuracy+'%');
              layui.table.reload('history-table')
          }
      });

    });
    //拖拽上传

</script>

</body>
</html>